<template>
	<view class="exhibitionCard flex" @click="det(data)">
		<view class="banner">
			<divimg class="img" :src="data.image" mode="aspectFill"></divimg>
			<view class="state" :class="end ? 'end' : ''" v-if="state">
				{{ data.spec_value_str }}
				<text v-if="end">-已结束</text>
			</view>
		</view>
		<view class="box">
			<view class="title">{{ data.name }}</view>
			<view class="line">
				<image class="icon" src="/static/images/wbz/date.png" mode="heightFix"></image>
				<view class="subtitle">{{ timeStrGetDate(data.start_time) + '~' + timeStrGetDate(data.end_time) }}</view>
			</view>
			<view class="line">
				<image class="icon" src="/static/images/wbz/time.png" mode="heightFix"></image>
				<view class="subtitle">{{ timeStrGetTime(data.start_time) + '~' + timeStrGetTime(data.end_time) }}</view>
			</view>
			<view class="line">
				<image class="icon" src="/static/images/wbz/map.png" mode="heightFix"></image>
				<view class="subtitle">{{ data.address }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { timeStrGetDate, timeStrGetTime } from '@/utils/utils.js';
	export default {
		name: 'exhibitionCard',
		props: {
			data: {
				type: Object,
				default: () => {},
			},
			state: {
				type: Boolean,
				default: false,
			},
			detClick: {
				type: Boolean,
				default: false,
			},
			ticket: {
				type: Boolean,
				default: false,
			},
			pageType:{
				type: String,
				default: '2',
			}
		},
		computed: {
			end() {
				const timeIng = new Date().getTime();
				const timeEnd = this.data.end_time * 1000;
				return timeEnd < timeIng;
			},
		},
		data() {
			return {};
		},
		methods: {
			timeStrGetDate: timeStrGetDate,
			timeStrGetTime: timeStrGetTime,
			det({ id, type, oid }) {
				if (!this.detClick) {
					return;
				}
				uni.navigateTo({
					url: '/pages/wbz/details/details?id=' + id + '&type=' + this.pageType + '&ticket='+this.ticket+'&oid=' + oid,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.exhibitionCard {
		width: 690rpx;
		height: 250rpx;
		border-radius: 20rpx;
		background: #ffffff;
		margin: 0 auto;
		.banner {
			width: 330rpx;
			height: 250rpx;
			background: #cfcfcf;
			border-radius: 20rpx;
			position: relative;
			.img {
				width: 100%;
				height: 100%;
			}
			.state {
				position: absolute;
				right: 10rpx;
				bottom: 10rpx;
				background: $price-color;
				color: $txt-color;
				line-height: 40rpx;
				padding: 0 4rpx;
				font-size: $uni-font-size-12;
			}
			.end {
				background: #999999;
			}
		}
		.box {
			width: 370rpx;

			overflow: hidden;
			.title {
				margin: 30rpx;
				margin-bottom: 15rpx;
				color: #000000;
				font-size: $uni-font-size-12;
			}
			.line {
				margin-top: 15rpx;
				margin-left: 30rpx;
				align-items: center;
				display: flex;
				.icon {
					height: 25rpx;
					min-height: 25rpx;
					min-width: 20rpx;
					margin-right: 15rpx;
				}
				.subtitle {
					color: #666666;
					font-size: $uni-font-size-12;
				}
				.unit {
					font-size: $uni-font-size-12;
					color:$price-color;
				}
			}
		}
	}
</style>
